<script setup>
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listApi} from "@/api/DeptApi";
import {getResponseData} from "@/util";
import {updateApi} from "@/api/EmpApi";
import {useStore} from "vuex";
const vuex=useStore();

// 所在部门下拉菜单选项
let deptItems = [];
// 获取员工记录
let emp = JSON.parse(sessionStorage.getItem('emp'));

// 表单项
let items = shallowRef([
  {'label': '登录账号', 'prop': 'username', 'span': 12, 'readonly': true},
  {'label': '真实姓名', 'prop': 'realname', 'span': 12},
  {'label': '员工年龄', 'prop': 'age', 'span': 12, 'type': 'number'},
  {'label': '手机号码', 'prop': 'phone', 'span': 12},
  {'label': '微信号码', 'prop': 'wechat', 'span': 12},
  {'label': '电子邮件', 'prop': 'email', 'span': 12},
  {
    'label': '员工性别', 'prop': 'gender', 'span': 12, 'type': 'select', 'optionItems': [
      {'label': '女孩', 'value': 0},
      {'label': '男孩', 'value': 1},
      {'label': '保密', 'value': 2},
    ]
  },
  {
    'label': '所在部门', 'prop': 'fkDeptId', 'type': 'select',
    'optionItems': deptItems, 'span': 12
  },
  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'span': 12},
  {'label': '所在省份', 'prop': 'province', 'span': 12},
  {'label': '员工描述', 'prop': 'info', 'type': 'textarea', 'span': 12},
  {'label': '详细地址', 'prop': 'address', 'type': 'textarea', 'span': 12},
]);
// 表单值
let data = shallowReactive(emp);
// 表单规则
let rules = {
  'username': RULE.USERNAME,
  'password': RULE.PASSWORD,
  'realname': RULE.REALNAME,
  'phone': RULE.PHONE,
  'idcard': RULE.IDCARD,
  'info': RULE.COMMON_INFO,
};

/* ==================== 查询全部的部门记录 ==================== */
async function listDept() {
  let res = await listApi();
  let depts = getResponseData(res);
  Object.values(depts).forEach(dept => {
    deptItems.push({'label': dept['title'], 'value': dept['id']});
  });
}

/* ==================== 加载函数 ==================== */
onMounted(() => listDept());

/* ==================== 修改记录 ==================== */
function updateSuccess(){
  //获取当前员工
  let loginEmp =JSON.parse(sessionStorage.getItem('loginEmp'));
  //若修改的是当前登录员工，则跳入登录页
  if (loginEmp['id']===emp['id']){
    sessionStorage.clear();
    vuex.dispatch('setLoginFlag',false);
    router.push('/');
  }else {
    router.push('/ums/Emp')
  }
}
</script>

<template>

  <my-nav :items="[
  {'icon': 'User', 'label': '员工管理', 'url': '/Emp'},
  {'icon': 'User', 'label': '员工列表', 'url': '/Emp'},
  {'icon': 'User', 'label': '修改员工'},
]"/>

  <el-divider/>

  <my-form v-if="deptItems" type="update" :items="items" :data="data" :rules="rules"
           :api="updateApi" :fn="updateSuccess"/>
  "
</template>

<style scoped lang="scss">

</style>